{% extends 'base.html' %}
{% block title %}客户管理{% endblock %}
{% block header %}客户管理{% endblock %}

{% block content %}
<div class="card-container">

  <!-- 查询卡片 -->
  <div class="query-card">
    <h4 class="card-title fw-bold mb-4">🔍 查询客户</h4>
    <form method="get" class="query-form">

      <div class="form-group">
        <label>查询模式</label>
        <select name="mode" id="mode">
          <option value="">-- 请选择 --</option>
          <option value="exact" {% if mode == 'exact' %}selected{% endif %}>精确查询</option>
          <option value="fuzzy" {% if mode == 'fuzzy' %}selected{% endif %}>模糊查询</option>
          <option value="range" {% if mode == 'range' %}selected{% endif %}>范围查询</option>
        </select>
      </div>

      <div class="form-group">
        <label>字段</label>
        <select name="field" id="field">
          <option value="">-- 请选择 --</option>
          <option value="customerID" {% if field == 'customerID' %}selected{% endif %}>客户编号</option>
          <option value="customerName" {% if field == 'customerName' %}selected{% endif %}>姓名</option>
          <option value="PID" {% if field == 'PID' %}selected{% endif %}>身份证</option>
          <option value="telephone" {% if field == 'telephone' %}selected{% endif %}>电话</option>
          <option value="address" {% if field == 'address' %}selected{% endif %}>地址</option>
        </select>
      </div>

      <div class="form-group" id="value-box">
        <label>查询值</label>
        <input type="text" name="value" value="{{ value or '' }}" placeholder="请输入查询值，如 张三 或 110xxxxxxxxx">
      </div>

      <div class="form-group d-none" id="range-box">
        <label>查询范围</label>
        <div style="display: flex; gap: 8px;">
          <input type="text" name="low" value="{{ low or '' }}" placeholder="下限">
          <input type="text" name="high" value="{{ high or '' }}" placeholder="上限">
        </div>
      </div>

      <!-- 按钮区域 -->
      <div class="form-actions">
        <button type="submit" class="btn">查询</button>
        <a href="{{ url_for('customers') }}" class="btn">重置</a>
        <a href="{{ url_for('add_customer') }}" class="btn">添加客户</a>
        <a href="{{ url_for('export_customers') }}" class="btn">导出 CSV</a>
      </div>
    </form>
  </div>

  <!-- 客户列表卡片 -->
  <div class="table-card">
    <h4 class="card-title fw-bold mb-4">📋 客户列表</h4>
    <div class="table-responsive">
      <table>
        <thead>
          <tr>
            <th>客户编号</th>
            <th>客户姓名</th>
            <th>身份证号</th>
            <th>联系电话</th>
            <th>联系地址</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {% if customers %}
            {% for c in customers %}
            <tr>
              <td>{{ c.customerID }}</td>
              <td>{{ c.customerName }}</td>
              <td>{{ c.PID }}</td>
              <td>{{ c.telephone }}</td>
              <td>{{ c.address }}</td>
              <td>
                <a href="{{ url_for('edit_customer', id=c.customerID) }}" class="btn-link">编辑</a>
                <a href="{{ url_for('delete_customer', id=c.customerID) }}" onclick="return confirm('确认删除该客户？')" class="btn-danger">删除</a>
              </td>
            </tr>
            {% endfor %}
          {% else %}
            <tr><td colspan="6" class="text-muted">暂无客户信息</td></tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>

</div>

<script>
  function onModeChange() {
    const mode = document.getElementById('mode').value;
    const valueBox = document.getElementById('value-box');
    const rangeBox = document.getElementById('range-box');
    if (mode === 'range') {
      valueBox.classList.add('d-none');
      rangeBox.classList.remove('d-none');
    } else {
      valueBox.classList.remove('d-none');
      rangeBox.classList.add('d-none');
    }
  }
  document.addEventListener('DOMContentLoaded', onModeChange);
</script>
{% endblock %}
